<style lang="scss">
.loginPage {
  width: 100%;
  height: 100vh;
  background: #f3f5ff;
  .login-container {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1800px;
    height: 900px;
    overflow: hidden;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    .login_l {
      width: 1030px;
      .login_l_img {
        width: 100%;
      }
    }
    .login_r {
      width: calc(100% - 1030px);
      height: 100%;
      position: relative;
      display: flex;
      align-items: center;
      background: #ffffff;
      .login_r_t {
        position: absolute;
        width: 394px;
        right: 0;
        top: 40px;
      }
      .login_r_b {
        position: absolute;
        width: 266px;
        right: 0;
        bottom: 0;
      }
      .login-box {
        width: 540px;
        margin-left: 60px;
        .login-form {
          .login-title {
            margin-bottom: 12px;
            color: #333333;
            font-size: 46px;
            font-weight: 560;
            letter-spacing: 2px;
          }
          .el-tabs {
            margin: 40px 0;
            .el-tabs__item {
              color: #666666;
              font-size: 30px;
            }
            .el-tabs__item.is-active {
              color: #128bf1;
            }
            .el-tabs__active-bar {
              background-color: #128bf1;
            }
          }
          .el-tabs__nav-wrap::after {
            height: 0;
          }
          .formImg {
            width: 28px;
            vertical-align: middle;
          }
          .login_username,
          .login_userpassword {
            border-bottom: 1px solid #eee;
            padding-bottom: 25px;
          }
          .el-input {
            width: 350px;
          }
          .el-input__inner {
            border: none;
          }
        }
        .el-row {
          margin-bottom: 40px;
        }
        .codeBut {
          width: 160px;
          height: 45px;
          background: #128bf1;
          border-radius: 2px;
        }
        .loginBut {
          margin: 60px 0 0 40px;
          width: 240px;
          height: 65px;
          background: #128bf1;
          border-radius: 4px;
        }
      }
    }
  }
}
</style>

<template>
  <div class="loginPage" v-if="dingState == false">
    <div class="login-container" v-loading="loadSubmitting">
      <div class="login_l">
        <img src="../../assets/images/login_01.jpg" class="login_l_img" />
      </div>
      <div class="login_r">
        <img src="../../assets/images/login_02.png" class="login_r_t" />
        <div class="login-box" @keyup.enter="doLogin">
          <el-form class="login-form">
            <p class="login-title">成都高新区统一工单系统</p>
            <el-tabs v-model="activeName" @tab-click="handleClick">
              <el-tab-pane label="账号登录" name="account"></el-tab-pane>
              <el-tab-pane label="验证码登录" name="code"></el-tab-pane>
            </el-tabs>
            <template v-if="activeName == 'account'">
              <el-row class="login_username">
                <el-col :span="24">
                  <!-- <el-form-item
                  prop="username"
                  label=""
                  :rules="[
                    { required: true, message: '请输入帐号', trigger: 'blur' }
                  ]"
                > -->
                  <img
                    src="../../assets/images/login_username.png"
                    class="formImg"
                  />
                  <el-input
                    v-model="username"
                    placeholder="请输入帐号"
                  ></el-input>
                  <!-- </el-form-item> -->
                </el-col>
              </el-row>
              <el-row class="login_userpassword">
                <el-col :span="24">
                  <!-- <el-form-item
                  prop="password"
                  label=""
                  :rules="[
                    { required: true, message: '请输入密码', trigger: 'blur' }
                  ]"
                > -->
                  <img
                    src="../../assets/images/login_userpassword.png"
                    class="formImg"
                  />
                  <el-input
                    v-model="password"
                    type="password"
                    placeholder="请输入密码"
                  ></el-input>
                  <!-- </el-form-item> -->
                </el-col>
              </el-row>
            </template>
            <template v-else>
              <el-row class="login_username">
                <el-col :span="24">
                  <!-- <el-form-item
                  prop="userPhone"
                  label=""
                  :rules="[
                    { required: true, message: '请输入手机号', trigger: 'blur' }
                  ]"
                > -->
                  <img
                    src="../../assets/images/login_username.png"
                    class="formImg"
                  />
                  <el-input
                    v-model="userPhone"
                    placeholder="请输入手机号"
                  ></el-input>
                  <!-- </el-form-item> -->
                </el-col>
              </el-row>
              <el-row class="login_userpassword">
                <el-col :span="24">
                  <!-- <el-form-item
                    prop="userCode"
                    label=""
                    :rules="[
                      { required: true, message: '请输入验证码', trigger: 'blur' }
                    ]"
                  > -->
                  <img
                    src="../../assets/images/login_userpassword.png"
                    class="formImg"
                  />
                  <el-input
                    v-model="userCode"
                    placeholder="请输入验证码"
                  ></el-input>
                  <el-button
                    type="primary"
                    :loading="loadSubmitting"
                    class="codeBut"
                    @click="getCode"
                    :disabled="codeDisabled"
                    >{{
                      codeDisabled == true
                        ? downTime + 's后重新获取'
                        : '点击获取验证码'
                    }}</el-button
                  >
                  <!-- </el-form-item> -->
                </el-col>
              </el-row>
            </template>
            <el-row>
              <el-col>
                <el-button
                  type="primary"
                  :loading="loadSubmitting"
                  v-on:click="doLogin"
                  class="loginBut"
                  >登 录</el-button
                >
              </el-col>
            </el-row>
          </el-form>
        </div>
        <img src="../../assets/images/login_03.png" class="login_r_b" />
      </div>
    </div>
  </div>
</template>

<script>
const interDown = ''
export default {
  data () {
    return {
      username: process.env.NODE_ENV === 'development' ? 'chenyy' : '',
      password: process.env.NODE_ENV === 'development' ? 'A@lamp2020' : '',
      loadSubmitting: false,
      activeName: 'account',
      userPhone: '',
      userCode: '',
      codeDisabled: false,
      downTime: 59,
      code: '',
      dingState: null
    }
  },
  methods: {
    // 登录方法
    doLogin () {
      if (this.activeName == 'account') {
        this.userPhone = ''
        this.userCode = ''
        if (this.username === '') {
          this.$message({ message: '请输入用户名', type: 'warning' })
          return
        }
        if (this.password === '') {
          this.$message({ message: '请输入密码', type: 'warning' })
          return
        }
      } else {
        this.username = ''
        this.password = ''
        let reg_tel = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/
        if (this.userPhone === '') {
          this.$message({ message: '请输入手机号码', type: 'warning' })
          return
        }
        if (!reg_tel.test(this.userPhone)) {
          this.$message({ message: '请输入正确的手机号码', type: 'warning' })
          return
        }
        if (this.userCode === '') {
          this.$message({ message: '请输入验证码', type: 'warning' })
          return
        }
      }
      this.loadSubmitting = true
      // 发送登录请求
      this.$axios
        .post(this.$api.common.login, {
          userName: this.username,
          userPwd: this.$md(this.password),
          phone: this.userPhone,
          validateCode: this.userCode
        })
        .then(rs => {
          if (rs) {
            // 将 userInfo 存入 sessionStorage
            sessionStorage.setItem('GOVERNANCE_USER_INFO', JSON.stringify(rs))
            // 登录成功 跳转 main 页面
            this.$message({
              message: '登录成功',
              type: 'success',
              showClose: true
            })
            this.$router.push(
              JSON.parse(sessionStorage.getItem('GOVERNANCE_USER_INFO'))
              .menuEntityList[0].path
            )
          } else {
            this.loadSubmitting = false
          }
        })
    },
    // 会话id登录
    doHhidLogin () {
      const { hhid } = this.$route.query
      if (hhid) {
        this.loadSubmitting = true
        this.$axios
          .get(this.$api.common.loginWithToken + '/' + hhid)
          .then(rs => {
            // 将 userInfo 存入 sessionStorage
            sessionStorage.setItem('GOVERNANCE_USER_INFO', JSON.stringify(rs))
            this.$router.push(
              JSON.parse(sessionStorage.getItem('GOVERNANCE_USER_INFO'))
                .menuEntityList[0].path
            )
          })
          .catch(() => {
            this.$message.warning('系统未给你授权，请联系管理员')
            this.$router.push('/login')
          })
      }
    },
    handleClick (tab, event) {
      this.activeName = tab.name
    },
    getCode () {
      const that = this
      let reg_tel = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/
      if (this.userPhone === '') {
        this.$message({ message: '请输入手机号码', type: 'warning' })
        return
      }
      if (!reg_tel.test(this.userPhone)) {
        this.$message({ message: '请输入正确的手机号码', type: 'warning' })
        return
      }
      // 获取验证码
      that.$axios
        .post(that.$api.common.getCode, {
          phone: that.userPhone
        })
        .then(rs => {
          if (rs == true) {
            that.codeDisabled = rs
            that.interDown = setInterval(function () {
              if (that.downTime > 0) {
                that.downTime = that.downTime - 1
              } else {
                that.codeDisabled = false
                that.downTime = 59
                clearInterval(that.interDown)
              }
            }, 1000)
          }
        })
    },
    GetUserInfo (data) {
      let getData =
        '?app_key=' +
        data.app_key +
        '&code=' +
        data.code +
        '&nonce_str=' +
        data.nonce_str +
        '&timestamp=' +
        data.timestamp +
        '&signature=' +
        data.signature
      let url = 'http://119.6.79.250:8330/api/get_user_info' + getData
      fetch(url, { method: 'GET' })
        .then(res => {
          return res.json()
        })
        .then(json => {
          this.$axios
            .post(this.$api.common.login, {
              tel: json.data.phone
            })
            .then(res => {
              if (res) {
                // 将 userInfo 存入 sessionStorage
                sessionStorage.setItem(
                  'GOVERNANCE_USER_INFO',
                  JSON.stringify(res)
                )
                // 登录成功 跳转 main 页面
                this.$message({
                  message: '登录成功',
                  type: 'success',
                  showClose: true
                })
                this.$router.push(
                  JSON.parse(sessionStorage.getItem('GOVERNANCE_USER_INFO'))
                    .menuEntityList[0].path
                )
              } else {
                this.loadSubmitting = false
              }
            })
        })
        .catch(err => {
          console.log('err', err)
        })
    }
  },
  mounted () {
    let urlHref = window.location.href
    let query = this.$route.query
    if (urlHref.indexOf('ding') > 0) {
      this.dingState = true
      if (query.code) {
        let getUserInfoData = {
          app_key: 'dinguok8fp7xoc6ijue0',
          code: query.code,
          nonce_str: Math.random()
            .toString(36)
            .slice(-6),
          timestamp: new Date().getTime(),
          signature: ''
        }
        this.code = query.code
        this.$axios
          .post(this.$api.common.getSignature, getUserInfoData)
          .then(res => {
            if (res) {
              getUserInfoData.signature = res
              this.GetUserInfo(getUserInfoData)
            }
          })
      } else {
        // 线上
        window.location.href =
          'http://119.6.79.250:8330/oauth/dingtalk?app_key=dinguok8fp7xoc6ijue0&redirect_uri=http%3A%2F%2F118.122.86.3%2Fding%2Fgovernment%2F%23%2Flogin'
        // 线下
        // window.location.href="http://119.6.79.250:8330/oauth/dingtalk?app_key=dinguok8fp7xoc6ijue0&redirect_uri=http%3A%2F%2F192.168.1.40%3A8081%2F%23%2Flogin"
      }
    } else {
      this.dingState = false
      this.doHhidLogin()
    }
  }
}
</script>
